<template>
  <div class="">
    <div class="btn-box">
      <template v-if="!pay_success">
        <van-button class="btn confirm" text="确认支付" color="linear-gradient(to right,#FE1B49,#E90104)" block round @click="clickPay"></van-button>
        <wx-button class="btn cancle" open-type="launchApp" app-parameter="wechat" binderror="launchAppError">取消</wx-button>
      </template>
      <wx-button v-else class="btn confirm" open-type="launchApp" app-parameter="wechat" binderror="launchAppError">支付成功，返回APP</wx-button>
    </div> 
    <!-- 授权弹出框 -->
    <small-login ref="smalllogin"></small-login>
  </div>
</template>

<script>
import SmallLogin from '@/components/SmallLogin/smallLogin.vue'
import small from '@/smallapp/small'
export default {
  components: {
    SmallLogin
  },
  data() {
    return {
      pay_success: false,
      jsApiParameters: {}
    }
  },
  created() {
    
  },
  mounted() {
    window.addEventListener('wxload', (query) => {
      // console.log(query, '监听页面参数')
      if (query.payinfo) {
        this.jsApiParameters = JSON.parse(query.payinfo)
      }
    })
    window.addEventListener('wxshow', () => {
      if(!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
      }
    })
  },
  methods: {
    clickPay() {
      if(!small.checkLogin()) {
        this.$refs.smalllogin.openSmallLoginPop()
        return false
      }
      wx.requestPayment({
        timeStamp: this.jsApiParameters.timeStamp,
        nonceStr: this.jsApiParameters.nonceStr, //
        package: this.jsApiParameters.package, //
        signType: this.jsApiParameters.signType, //微信签名方式
        paySign: this.jsApiParameters.paySign, //微信签名
        success: (res) => {
          this.pay_success = true
        },
        fail: (failmsg) => {
          // console.log(failmsg)
          this.$Error(failmsg.errMsg)
        }
      })
    },
    clickCancle() {
      
    },
    launchAppError(e) {
      // console.log(e)
      this.$Error(e.detail.errMsg)
    }
  }
}
</script>

<style lang="scss">
.btn-box {
  padding: 50px 0;
  text-align: center;
  .btn {
    width: 650px;
    font-size: 32px;
    margin: 50px auto 0;
    color: #fff;
    height: 88px;
    line-height: 88px;
    color: #fff;
    border-radius: 999px;
    &.confirm {
      background: linear-gradient(to right,#FE1B49,#E90104);
      border: none;
    }
    &.cancle {
      border: 1px solid #F20C20;
      color: #F20C20;
    }
  }
}
</style>
